<template>
    <div class="city">
        <city-header :cities="cities"></city-header>
        <city-hot :dt="hotCities"></city-hot>
        <city-letter :dt="letters"></city-letter>
        <city-module v-for="(val,key) in cities" :dt="val" :ky="key"></city-module>
    </div>
</template>

<script>
    import CityHeader from "./components/CityHeader"
    import CityHot from "./components/CityHot"
    import CityLetter from "./components/CityLetter"
    import CityModule from "./components/CityModule"
    export default {
        name: "City",
        data() {
          return {
              hotCities: [],
              cities: {},
              letters: []
          }
        },
        mounted() {
            // 请求数据
            this.$axios.get('/mock/city.json').then((res) => {
                const dt = res.data.data
                this.hotCities = dt.hotCities
                this.cities = dt.cities
                this.letters = Object.keys(this.cities)

            }).catch((error) => {
                console.log('请求失败！')
            })
        },
        components: {
            CityHeader,
            CityHot,
            CityLetter,
            CityModule
        }
    }
</script>

<style scoped>


</style>